<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>淘宝注册界面</title>
    <style>
    * {
        padding: 0;
            margin: 0;
    }
    .top{
        margin-left: 17%;
    }
    .biaoti {
        width: 110px;
        height: 45px;
        float: left;
    }
    .biaoti2{
    padding-top: 10px;
     font-size: 20px;

    }
    .middle{
        width: 30%;
        height: 300px;
        margin: auto;
        margin-top: 10%;
    background-color: rgb(255, 255, 255);
    }
    
    .telephone{
        float: left;
        border: none ;
        border-color: silver;

        height:50px;
       
    }
    .tex
    {
     
        float: left;
        height: 50px;
        width: 200px;
        border: none;

       
    }
  
   
    input{
        border: 0px;
    
    }
    .yanzheng{
     position:relative;
     height: 40px;
   
       
    } .yz{
        color:tomato;
        float: left;
        top: 1px;
        right: 2px;
        position:absolute;
        
    }
    .words{
        padding-right:10px;
        text-align:right;
        margin-top: 20px;
        padding-top: 10px;
        font-size: 16px;
    
       
    }
    tr {
        line-height: 50px;
    }
   
    .liner{
        
        margin-top: 10px;
        height: 25px;
        background-image: linear-gradient(to left,rgb(255,203,108),rgb(255,168,128));
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    }
    .wz1{
        color:silver;
        font-size: 12px;

    }
    .wz2{
        color: tomato;
        font-size: 12px;
        line-height: 20px;

    }
    .zhuce{
        text-align: right;
        color:tomato;
        font-size: 12px;
        margin-top: 30px;
        height: 25px;
    }
    hr{
        width: 60%;
        margin-left: 18%;

        margin-top: 20px;
    }
   select{
       border:none;
   }
   .bottom{
    float: left;
    margin-left:271px;
    margin-top: 8px;
    margin-bottom: 8px;

}
.bottom  ul{
    float: left;

 
}
.bottom  ul li{
    float: left;
    display: block;
    padding-left: 5px;
    color:#878e95;
    font-size: 14px;
}
.bottom1{
    float: left;
    margin-left:271px;
    margin-top: 8px;
    margin-bottom: 8px;

}
.bottom1  ul{
    float: left;

 
}
.bottom1  ul li{
    float: left;
    display: block;
    padding-left: 10px;
    color:#878e95;
    font-size: 14px;
}
.bottom2{
    float: left;
    margin-left:271px;
    margin-top: 8px;
    margin-bottom: 8px;

}
.bottom2  ul{
    float: left;

 
}
.bottom2  ul li{
    float: left;
    display: block;
    padding-left: 10px;
    color:#878e95;
    font-size: 14px;
}
  
    </style>
</head>
<body>
    <div class="main">
        <div class="top">

            <div class="biaoti">
                <img src="images/1.png" alt="">
            </div>
            <div class="biaoti2">
               用户注册
            </div>

        </div>
        <div class="middle">
            <table >

                <tr>
                    <td class="words">
                       
                        
                        手机号码</td>
                    <td>
                        <div class="telephone">
                        <select name="" id="" style="height: 35px; border: 1px solid; border-color: #c0c0c0;border-radius: 0px 0px 0px 0px"  >
                            <option value="1"  selected>中国大陆&nbsp;+86</option>
                            <option value=""  >中国台湾&nbsp;+886</option>
                            <option value=""  >马来西亚&nbsp;+60</option>

                            <option value=""  >泰国&nbsp;+66</option>
                            <option value=""  >新加坡&nbsp;+65</option>
                            <option value=""  >日本&nbsp;+81</option>
                            <option value=""  >印度&nbsp;+91</option>

                            <option value=""  >美国&nbsp;+001</option>

                            <option value=""  >澳大利亚&nbsp;+61</option>
                            <option value=""  >俄罗斯&nbsp;+007</option>

                         </select>
                     
                    </div>
                    <div class="tex" >

                    <input  type="text" value="" name="" id="la" placeholder="请输入您的手机号码" style="width: 191px;height: 34px; padding-left: 10px;border: 1px solid;border-left-style: none; border-color: #c0c0c0;border-radius: 0px 0px 0px 0px ">
                
                    </div>
                    
                
                </td>
                </tr>
                <tr>
                    <td class="words">验证码</td>
                    <td  >
                        <div class="yanzheng">
<input type="text" placeholder="请输入校验码"  style="width:99%;height: 35px; border: 1px solid; border-color: #c0c0c0;border-radius: 0px 0px 0px 0px" >
                      <div class="yz"> <button type="button" style="color: tomato; border: none; background-color:transparent;" onclick="myFunction(la.value)">获取验证码</button></div>
                      </td>
                        </div>
                      
                </tr>

                        </div>
                <tr>
                    <td></td>
                    <td><div class="liner">同意协议并注册</div></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="wz2">
                        
                        <span class="wz1">
                        已阅读并同意以下协议</span>淘宝平台服务协议、隐私权政策、法<br>律声明、支付宝及客户端服务协议</td>
                </tr>
                <tr>
                    <td></td>
                    <td class="zhuce">切换成企业账户注册</td>
                </tr>
            </table>
            
        </div>
        <hr>
        <div class="bottom">
         
            <ul>
                <li>阿里巴巴集团 &nbsp;|</li>
                <li>阿里巴巴国际站 &nbsp;|</li>
                <li>阿里巴巴中国站 &nbsp;|</li>
                <li>全球速卖通 &nbsp;|</li>
                <li>淘宝网 &nbsp;|</li>
                <li>天猫  &nbsp;|</li>
                <li>聚划算  &nbsp;|</li>
                <li>一淘  &nbsp;|</li>
                <li>阿里妈妈  &nbsp;|</li>
                <li>阿里云计算  &nbsp;|</li>
                <li>云os  &nbsp;|</li>
                <li>万网  &nbsp;|</li>
                <li>支付宝  &nbsp;</li>
            </ul>
        </div>
        <hr>
        <div class="bottom1">
         
            <ul>
                <li>关于淘宝 </li>
                <li>合作伙伴</li>
                <li>营销中心</li>
                <li>联系客服</li>
                <li>开放平台</li>
                <li>诚招英才|</li>
                <li>联系我们</li>
                <li>网站地图</li>
                <li>法律声明及隐私权政策</li>
                <li style="color:#d9d6d6;">© 2021 Taobao.com 版权所有 </li>
              
            </ul>
        </div>
        <div class="bottom2">
         
            <ul>
                <li style="color:#d9d6d6;">网络文化经营许可证 </li>
                <li>网络文化经营许可证 &nbsp;|</li>
                <li style="color:#d9d6d6;">增值电信业务经营许可证：</li>
                <li style="color:#d9d6d6;">浙B2-20080224-1 &nbsp;|</li>
                <li style="color:#d9d6d6;">信息网络传播视听节目许可证：1109364号</li>
                
            </ul>
    </div>
    <script>
        function myFunction(la){
           if(null == la || "" == la || undefined == la)
           {
               alert("请输入手机号！");
   }else{
       var RegCellPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
       var  falg=la.search(RegCellPhone);
       if (falg==-1){
           alert("手机号格式不正确");
       }else{
           return true;
       }
        }
       }
   </script>
</body>
</html>